.<template>
  <view class="index_item_box">
    <view class="head">
      <text class="title">精选好货</text>
    </view>
    <ItemListComp class="item_box" v-if="questionList.length > 0" :questionList="questionList" :userInfo="userInfo" />
    <view class="cu-load bg-grey" v-if="isLoad" :class="finished?'over':'loading'"></view>
  </view>
</template>

<script>
  import ItemListComp from '@/pages/pagecomponents/itemlist'
  export default {
    components: {
      ItemListComp
    },
    data() {
      return {
        questionList: [],
        currentAdNumber: 0, // 已经加入的广告位数,用于消除数组长度的影响
        param: {
          version: 'v1.1.1',
          pageId: 10,
          pageSize: 10,
          cids: 2,
        },
        isLoad: false,
        finished: false,
      }
    },
    computed:{
      userInfo(){
        return this.$store.state.userInfo
      },
    },
    created() {
      this.getItemList()
    },
    methods: {
      nextPaging() {
        // 下一页
        if (this.finished !== true) {
          this.param.pageId += 1
          this.getItemList()
        }
      },
      getItemList(type) {
        if (type === 'pullDown') {
          // 下拉刷新
          this.currentAdNumber = 0, // 当前插入的广告数
          this.isLoad = true
          this.questionList = []
          this.param.pageId = 10
        }
        this.isLoad = true
        this.$api.dtkapi.getItemList(this.param).then(res => {
          if (type === 'pullDown') {
            // 下拉刷新
            uni.stopPullDownRefresh();
          }
          this.isLoad = false
          if (res.data.list && res.data.list.length <= 0) {
            this.finished = true;
          }
          let imgList = res.data.list
          let questionList = this.questionList
          questionList = questionList.concat(imgList)
          this.questionList = questionList
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .index_item_box {
    .head {
      padding: 0 20upx;
      text-align: left;
      margin-top: 50upx;
      vertical-align: middle;
      height: 60upx;
      line-height: 60upx;
      position: relative;
      .title {
        color: #353535;
        font-size: 20px;
        font-weight: 400;
      }
      .more {
        top: 0;
        right: 20upx;
        position: absolute;
        color: #8d8d8d;
        i {
          color: #8d8d8d;
          display: inline-block;
        }
      }
    }
    .item_box {
      min-height: 800px;
    }
    .cu-load::before {
      content: none
    }
  }
</style>
